<template>
  <div :style="style">
    <component :is="type" :value="value" :ispreview="true" />
  </div>
</template>

<script>
import widgetHref from "./html/widgetHref.vue";
import widgetText from "./html/widgetText.vue";
import widgetMarquee from "./html/widgetMarquee.vue";
import widgetTime from "./html/widgetTime.vue";
import widgetImage from "./html/widgetImage.vue";
import widgetSlider from "./html/widgetSlider.vue";
import widgetVideo from "./html/widgetVideo.vue";
import widgetIframe from "./html/widgetIframe.vue";
import widgetTable from "./html/widgetTable.vue";

import widgetBar from "./chart/widgetBar.vue";
import widgetBarCompare from "./chart/widgetBarCompare.vue";
import widgetBarGradient from "./chart/widgetBarGradient.vue";
import widgetBarLine from "./chart/widgetBarLine.vue";
import widgetBarStack from "./chart/widgetBarStack.vue";

import widgetLine from "./chart/widgetLine.vue";
import widgetLineCompare from "./chart/widgetLineCompare.vue";
import widgetLineStack from "./chart/widgetLineStack.vue";

import widgetPie from "./chart/widgetPie.vue";
import widgetPiePercentage from "./chart/widgetPiePercentage.vue";
import widgetPieNightingaleRose from "./chart/widgetPieNightingaleRose";

import widgetFunnel from "./chart/widgetFunnel.vue";
import widgetGauge from "./chart/widgetGauge.vue";

export default {
  name: "WidgetViewer",
  components: {
    widgetHref,
    widgetText,
    widgetMarquee,
    widgetTime,
    widgetImage,
    widgetSlider,
    widgetVideo,
    widgetIframe,
    widgetTable,
    
    widgetBar,
    widgetBarCompare,
    widgetBarGradient,
    widgetBarLine,
    widgetBarStack,
    
    widgetLine,
    widgetLineCompare,
    widgetLineStack,
    
    widgetPie,
    widgetPiePercentage,
    widgetPieNightingaleRose,
    
    widgetFunnel,
    widgetGauge
  },
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    type: String,
    value: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    style(){
      return {
        position: "absolute",
        width: this.value.position.width,
        height: this.value.position.height,
        left: this.value.position.left + 'px',
        top: this.value.position.top + 'px',
        zIndex: this.value.position.zIndex,
      }
    }
  }
};
</script>

<style scoped lang="less"></style>
